<template>
  <section>
    <div class="model retrieval">
      <img :src="IMGBASE64.JIANSUOGUANLI2X" class="orange">
      <span class="title">检索管理</span>
      <div class="body">
        <span>年级:</span>
        <select class="select" v-model="gradeSelect" :style="{background: `url(${IMGBASE64.SELECT}) no-repeat scroll right center`}">
          <option v-for="(item, key) in gradeOption" :label="item" :value="key"></option>
        </select>
        <span>学科:</span>
        <select class="select" v-model="subjectSelect" :style="{background: `url(${IMGBASE64.SELECT}) no-repeat scroll right center`}">
          <option v-for="(item, key) in subjectOption" :label="item.subjectName" :value="item.subjectId"></option>
        </select>
        <div class="middle">
          <el-select v-model="selectValue" filterable clearable placeholder="请输入教师姓名" size="small">
            <el-option
              v-for="item in allNameData"
              :label="item.name"
              :value="item.value">
            </el-option>
          </el-select>
          <el-button type="primary" @click="getTeacherData()" size="small">搜索</el-button>
        </div>
        <div class="right-btn">
          <a :href="this._httpUrl + `teacherInfo/infoQuery/export?yxt-xtoken=${exportUrl}`">
        	 <el-button type="primary" size="small">导出</el-button>
          </a>
        </div>
      </div>
    </div>

    <div class="model query">
      <img :src="IMGBASE64.JIAOSHIXINXICHAXUN2X" class="pink">
    	<span class="title">教师信息查询</span>
    	<div class="kong"></div>
    	<template>
    		<el-table :data="teacherData" style="width: 100%">
    			<el-table-column prop="name" label="姓名" align="center"></el-table-column>
    			<el-table-column prop="mobile" label="手机号" align="center"></el-table-column>
    			<el-table-column prop="grade" label="年级号" align="center"></el-table-column>
    			<el-table-column prop="subject" label="任教学科" align="center"></el-table-column>
    		</el-table>
        <el-pagination
          v-show="paging"
          @current-change="handleCurrentChange"
          :page-size="20"
          layout="prev, pager, next, jumper"
          :total="total"
          class="pull-right">
        </el-pagination>
    	</template>
    </div>

    <!-- <div class="details" v-show="isDetails">
      <img :src="IMGBASE64.XIANGQING2X" class="icon">
      <span class="title">详情</span>
      <el-button icon="close" class="close" @click="detailsShow()"></el-button>
      <div class="body">
        <el-form label-width="80px">
          <el-col :span="24">
            <el-form-item label="姓名">
              <span>{{detailsForm.name}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="联系方式">
              <span>{{detailsForm.mobile}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="年级">
              <span>{{detailsForm.grade}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="学科">
              <span>{{detailsForm.subject}}</span>
            </el-form-item>
          </el-col>
        </el-form>
      </div>
    </div> -->

    <transition name="modal-shadow">
      <div class="modal-backdrop" v-show="isSuccess"></div>
    </transition>
  </section>
</template>

<script>
export default {
  data () {
    return {
      exportUrl: null,
      isSuccess: false,
      isDetails: false,
      options: [],
      selectValue: null,
      teacherData: [],
      gradeSelect: null,
      gradeOption: [],
      subjectSelect: null,
      subjectOption: [],
      total: 0,
      page: 1,
      paging: true,
      allNameData: [],
      tablemsg: [
        {
          id: '1',
          name: '欧阳俊逸',
          phone: '13699999999',
          grade: '一年级',
          subject: '形体舞蹈'
        },
        {
          id: '2',
          name: '欧阳俊逸',
          phone: '13699999999',
          grade: '一年级',
          subject: '形体舞蹈'
        },
        {
          id: '3',
          name: '欧阳俊逸',
          phone: '13699999999',
          grade: '一年级',
          subject: '形体舞蹈'
        }
      ],
      detailsForm: {
        name: null,
        mobile: null,
        idNo: null,
        grade: null,
        subject: null,
        id: null,
        homeAddr: null
      }
    }
  },
  mounted () {
    this.getTeacherNameData()
    this.getGradeData()
    this.getSubjectData()
    this.exportUrl = this._exportUrl()
  },
  methods: {
    _exportUrl () {
      let _cookie = document.cookie.split(';')
      let _cookieArray = []
      _cookie.forEach(v => {
        let _d = v.split('=')
        _cookieArray.push({
          key: _d[0],
          value: _d[1]
        })
      })
      console.log(_cookieArray[0].value)
      return _cookieArray[0].value
    },
    handleCurrentChange (val) {
      this.page = val
      this.getTeacherNameData()
    },
    getTeacherNameData () {
      this.$http.post(this._httpUrl + 'teacherInfo/infoQuery', {page: (this.page), rows: 20, grade: this.gradeSelect, subjectId: this.subjectSelect, teacherName: this.selectValue}, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
        if (response.body.code === '000') {
          this.options = response.data.data.rows
          this.teacherData = response.data.data.rows
          this.total = response.data.data.total
          this.getAllData()
          for (var i = 0; i < this.teacherData.length; i++) {
            this.teacherData[i].value = i + 1
            for (var x in this.gradeOption) {
              if (this.teacherData[i].grade === parseInt(x)) {
                this.teacherData[i].grade = this.gradeOption[x]
              }
            }
          }
        } else if (response.body.code === '887') {
          this.$router.push('/')
        } else if (response.body.code === '889') {
          this.$router.push('/')
        }
      })
    },
    getAllData () {
      this.$http.post(this._httpUrl + 'teacherInfo/infoQuery', {page: (this.page), rows: this.total}, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
        if (response.body.code === '000') {
          this.allNameData = response.data.data.rows
          for (var i = 0; i < this.allNameData.length; i++) {
            this.allNameData[i].value = i + 1
          }
        } else if (response.body.code === '887') {
          this.$router.push('/')
        } else if (response.body.code === '889') {
          this.$router.push('/')
        }
      })
    },
    getTeacherData () {
      if (this.selectValue !== null) {
        this.paging = false
        for (var i = 0; i < this.allNameData.length; i++) {
          if (this.selectValue === this.allNameData[i].value) {
            this.teacherData = []
            console.log(this.allNameData)
            console.log(this.allNameData[i])
            this.teacherData.push(this.allNameData[i])
          }
          for (var x in this.gradeOption) {
            if (this.allNameData[i].grade === parseInt(x)) {
              this.allNameData[i].grade = this.gradeOption[x]
            }
          }
        }
      }
      if (this.selectValue === null) {
        this.getTeacherNameData()
        this.paging = true
      }
    },
    getGradeData () {
      this.$http.post(this._httpUrl + 'public/grade/query', {}, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
        if (response.body.code === '000') {
          this.gradeOption = response.data.data.gradeMap
        } else if (response.body.code === '887') {
          this.$router.push('/')
        } else if (response.body.code === '889') {
          this.$router.push('/')
        }
      })
    },
    getSubjectData () {
      this.$http.post(this._httpUrl + 'public/subject/query', {}, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
        if (response.body.code === '000') {
          this.subjectOption = response.data.data
          console.log(response.data)
        } else if (response.body.code === '887') {
          this.$router.push('/')
        } else if (response.body.code === '889') {
          this.$router.push('/')
        }
      })
    },
    detailsShow () {
      this.isDetails = !this.isDetails
      this.isSuccess = !this.isSuccess
    }
    // showDetails (rows) {
    //   this.detailsForm.name = rows.name
    //   this.detailsForm.mobile = rows.mobile
    //   this.detailsForm.idNo = rows.idNo
    //   this.detailsForm.grade = rows.grade
    //   this.detailsForm.subject = rows.subject
    //   this.detailsForm.id = rows.id
    //   this.detailsForm.homeAddr = rows.homeAddr
    //   this.isDetails = !this.isDetails
    //   this.isSuccess = !this.isSuccess
    // }
  }
}
</script>

<style lang="less" scoped>
@import '/static/css/all-use.css';
	.retrieval{
	  .body{
	    span{
	    	margin-left: 4%;
	    }
	    span:first-child{
	    	margin-left: 0;
	    }
	  }
	  .select{
	    width: 10%;
	    border: 0;
	    border-bottom: 1px solid #D7D7D7;
	  }
	  .middle{
	    width: 35%;
	    display: inline-block;
	    margin-left: 10%;
			&-text{
				width: 58%;
				border: 0;
				border-bottom: 1px solid #D7D7D7;
			}
		}
		.right-btn{
			float: right;
			margin-right: 2%;
		}
	}
	.query{
		.title{
		  margin-left: 11%;
		}
	}
  .close{
    position: absolute;
    right: 2%;
  }
  .details{
  width: 55%;
  position: fixed;
  left: 25%;
  top: 60px;
  background: #FFF;
  border-radius: 5px;
  z-index: 99999;
  padding: 20px 10px 10px 10px;
  }
</style>
